<template>
  <el-table-column fixed="right" :label="props.label" :width="Number(props.width)">
    <template #default="{row}">
      <table-actionbar :row="row" :action="props.action" :buttons="props.buttons"></table-actionbar>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import TableActionbar from "./table-actionbar.vue";

/**
 *
 * 操作栏封装
 *
 * 就是一个特殊的列，操作栏所有按钮由数据驱动产生。
 *
 * 对接后台设计的时候，buttons 数据可能是由后台接口提供。
 */
const props = defineProps({
    label: {type: String, default: '操作栏'}
    // 宽度
    , width: {type: [String, Number], default: 180}
    // 操作栏，默认启用
    , buttons: {type: Array, default: undefined}
    // 行内点击事件以及操作栏事件，大部分事件都是通过这个函数进行传递的
    , action: {type: Function}
})
</script>
